<template>
  <div class="patient-card">
    <div class="card-header">
      <div>
        <img src="@/assets/logo/logo_mobel.jpg" width="40px" height="40px">
      </div>
      <div style="font-weight: bold;height: 40px; display: flex; align-items: center;"><div style="margin-left: 5%;white-space: nowrap;">健康医疗诊卡</div></div>
     
    </div>
    <div class="card-content">
  
      <div>
        <p style="text-align: left"><strong>ID:</strong> {{ authStore.id }}</p>
        <p style="text-align: left">
          <strong>姓名:</strong> {{ authStore.getUsername }}
        </p>
      </div>
    </div>
    <div>
      <img src="http://47.119.156.222:9000/hospital/ed9522d18c7a581f8556fb8d8b4a84c7_1.jpg" alt="" width="30%" style="position: absolute; top: 15%;right: 3%;">
    </div>
  </div>
</template>
  
  <script>
/* eslint-disable */
import { ref, getCurrentInstance } from "vue";
import { useAuthStore } from "@/stores/authStore";
import LocalStorageUtil from '@/utils/localStorageUtil';

export default {
  setup() {
    // 在这里可以添加一些逻辑，例如计算属性或方法
    const authStore = useAuthStore();
    console.log(authStore);
    const id = ref();
    const name = ref("");
    return {
      // 返回需要暴露给模板的数据

      authStore,
      id,
      name,
    };
  },
};
</script>
  
  <style scoped>
.patient-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 90vw;
  margin: 20px auto;
  overflow: hidden;
  position: relative;
}

.card-header {
  width: 90%;
  background-color: #f7f7f7;
  padding: 10px;
  text-align: center;
  display: flex;
}

.card-content {
  padding: 15px;
}

.card-content p {
  margin: 5px 0;
}
.id-card {
  background-color: #fff;
  width: 300px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.id-card-header {
  background-color: #007bff;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.id-card-header h2 {
  margin: 10px 0 0;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

.id-card-body {
  padding: 20px;
}

.id-card-body p {
  margin: 10px 0;
}

.id-card-footer {
  background-color: #f8f9fa;
  padding: 15px;
  text-align: center;
  font-size: 14px;
}
</style>